<template>
  <div>
    <!-- <a href="#" class="btn btn-primary">添加英雄</a> -->
    <router-link to="/hero/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,idx) in list" :key="idx">
          <td>{{item.id}}</td>
          <td>{{item.heroName}}</td>
          <td>{{item.gender}}</td>
          <!-- 对日期时间使用过滤器来做格式化 -->
          <td>{{item.cTime | dateFormat}}</td>
          <td>
            <button @click="hEdit(item.id)" class="btn btn-success">编辑</button>
            &nbsp;
            <button @click="hDel(item.id)" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <!-- 暂无数据 -->
        <tr v-if="list.length===0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <!-- <button @click="hTestAxios">测试axios</button> -->
  </div>
</template>

<script>
// import axios from "axios";
// 导入日期格式化模块
// import moment from "moment";
// console.log(moment().format('YYYY年MM月DD日'));

export default {
  name: "Hero",
  data() {
    return {
      list: []
    };
  },
  //  当前组件完成之后自动连接
  created() {
    this.getData();
  },
  methods: {
    // 编辑按钮
    hEdit(id) {
      this.$router.push("/hero/edit/" + id);
    },

    //更新数据
    getData() {
     this.$http({
        method: "get",
        url: "heroes"
      })
        .then(res => {
          // console.log(res);
          this.list = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 删除按钮
    hDel(id) {
      if (!confirm("你确定要删除吗？")) {
        // 如果不删除
        return;
      }

      this.$http({
        method: "delete",
        url: "heroes/" + id
      })
        .then(res => {
          console.log(res);
          // 再次加载数据
          this.getData();
        })
        .catch(err => {
          console.log(err);
        });
    }

    // hTestAxios () {
    //     // 2. 根据axios的使用格式，发出一个请求试一下
    //     axios({
    //         method: 'get' ,
    //         url: 'heroes'
    //     }).then(res => {
    //         console.log(res)
    //         this.list = res.data
    //     }).catch (err => {
    //         console.log(err)
    //     })
    // }
  }
  //过滤器
  // filters:{
  //     dateFormat(value){
  //       //   console.log(value);
  //         return moment(new Date(value)).format('YYYY-MM-DD hh:mm:ss')
  //     }
  // }
};
</script>